<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/style.css" />
    <script type="text/javascript" src="../static/sockjs.min.js" ></script>

    <script type="text/javascript" th:inline="javascript">
        var PATH = [[${session.contextpath}]];
        var websocket = null;
        if (window['WebSocket'])
        // ws://host:port/project/websocketpath
            websocket = new WebSocket("ws://" + window.location.host + PATH + '/websocket');
        else
            websocket = new new SockJS(PATH + '/websocket/socketjs');

        websocket.onopen = function(event) {
            console.log('open', event);
        };
        websocket.onmessage = function(event) {
            console.log('message', event.data);
           //$('div#message > ul').append('<li>' + event.data + '</li>');

            console.log("receive data : " +event.data);
            var value = event.data;
            console.log( value.toString().lastIndexOf(".jpg",1));

            if(value.toString().lastIndexOf(".jpg",1) > -1){
                $('div > img' ).attr("src","/static/img/"+ event.data );
            }else {
                $('div#message > h2').text(event.data);
                //$('div#message > h2').replace(event.data);
            }
        };
    </script>
</head>
<body>
<div class="container">
    <div id="message" >
        <h2></h2>
    </div>
    <div class="row clearfix" th:style="'margin-top:20px'">
        <div class="col-md-4 column" >
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300px" th:height="200px" />
        </div>
        <div class="col-md-4 column" >
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
        <div class="col-md-4 column" >
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
    </div>
    <div class="row clearfix" th:style="'margin-top:20px'">
        <div class="col-md-4 column">
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
        <div class="col-md-4 column">
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
        <div class="col-md-4 column">
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
    </div>
    <div class="row clearfix" th:style="'margin-top:20px'" >
        <div class="col-md-4 column">
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
        <div class="col-md-4 column">
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
        <div class="col-md-4 column">
            <img alt="80x80" th:src="@{/static/img/1.jpg}" class="img-rounded" th:width="300" th:height="200"/>
        </div>
    </div>

</div>
</body>
</html>